<template>
  <div class="page-box">
    <el-form :inline="true" :model="searchData" ref="form" label-width="110px">
      
      <el-form-item label="采购单位">
        <el-input v-model="searchData.buyingUnit" placeholder="请输入采购单位" ></el-input>
      </el-form-item>
      <el-form-item label="供应商订单号">
        <el-input v-model="searchData.orderNo" placeholder="请输入订单号" ></el-input>
      </el-form-item>
      <el-form-item label="下单起始时间">
        <el-date-picker v-model="searchData.orderStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="下单结束时间">
        <el-date-picker v-model="searchData.orderEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="handleCurrentChange(1)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row class="page-box-tool">
      <el-button type="success" @click="openSync()">同步订单状态</el-button>
    </el-row>

    <el-table
        border
        :data="tableData"
        :max-height="maxHeightNow"
        style="width: 100%"
        >
      <el-table-column prop="orderShowId" fixed label="总订单号"  width="130px"></el-table-column>
      <el-table-column prop="supplierOrderNo" fixed label="供应商订单号"  width="130px"></el-table-column>
      <el-table-column prop="goodsSku"  label="sku"  width="120px"></el-table-column>
      <el-table-column prop="goodsName"  label="商品名称"  width="320px"></el-table-column>
      <el-table-column prop="price"  label="单价"  width="110px"></el-table-column>
      <el-table-column prop="quantity"  label="数量"  width="110px"></el-table-column>
      <el-table-column prop="money"  label="金额"  width="110px"></el-table-column>
      <el-table-column prop="orderTime"  label="下单日期"  width="190px">
        <!-- <template slot-scope="scope">
          {{scope.row.orderTime|formeTime}}
        </template> -->
      </el-table-column>
      <el-table-column prop="reconciliationRemark" label="备注"  width="200px"></el-table-column>
      <el-table-column prop="reconciliationStatusValue"  label="对账状态"  width="120px" fixed="right"></el-table-column>

      <!-- <el-table-column label="操作" fixed="right" width="120px" >
        <template slot-scope="scope">
          <el-link type="primary" @click="detail(scope.row)">明细</el-link>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=totalPage>
    </el-pagination>

    <el-dialog title="同步订单状态" :visible.sync="dialogVisible" width="55%" >
      <el-form ref="orderForm" :model="orderForm" label-width="110px" :rules="rules">
        <el-form-item label="同步时间范围" prop="orderTime">
          <el-date-picker v-model="orderForm.orderTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sync()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { reconciliationCreat,reconciliationSupplierSync} from '@/api/supplier.api';
  import moment from 'moment'
  export default {
    name: 'reconciliation-emall',
    components: {},
    data() {
      return {
        searchData:{
        },
        purchaseList:[],

        tableData:[],
        currentPage:1,
        pageSize:10,
        totalPage:0,

        itemId:"",

        dialogVisible: false,
        orderForm:{},
        rules:{
          orderTime:[{ required: true, message: '请选择同步时间范围', trigger: 'change' }],
        },

      }
    },
    watch: {},
    computed: {
      maxHeightNow () {
        const height = window.innerHeight
        return height -  320
      }
    },
    filters: {
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      }
    },
    created() {
      this.onSearch();
    },
    mounted() {
    },
    methods: {
      onSearch(){
        this.searchData.current = this.currentPage;
        this.searchData.size = this.pageSize;
       
        reconciliationCreat(this.searchData).then( res =>{
          this.tableData = res.records
          this.totalPage = res.total
        })


      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.onSearch()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.onSearch()
      },

      openSync(){
        this.dialogVisible = true;
        if(this.$refs["orderForm"] !=undefined){
          this.$refs["orderForm"].resetFields();
        }
        this.orderForm={};

      },
      sync(){
        this.$refs["orderForm"].validate((valid) => {
          if (valid) {
            this.$confirm('是否确定同步订单状态?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const param = {
                orderStartTime: this.orderForm.orderTime[0],
                orderEndTime: this.orderForm.orderTime[1]
              };
              reconciliationSupplierSync(this.orderForm.orderTime[0],this.orderForm.orderTime[1]).then(res => {
                this.$message({
                  type: 'success',
                  message: '对账单同步完成!'
                });
                this.onSearch ()
              })

            });

          }
        })
      },


    }
  }
</script>

<style scoped lang="scss">
  .page-box {
    padding: 20px;
    background: white;
    .form-operation {
      text-align: right;
      .el-form-item {
        margin-right: 0;
      }
    }
    .el-pagination {
      padding: 20px;
      text-align: right;
    }
    &-tool {
      // text-align: right;
      padding-bottom: 20px;
    }
  }

</style>
